<template>
  <view class="mine-vip width-full">
    <image class="mine-vip-background width-full" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/mine_vip_background.png" />
    <view class="mine-vip-content flex-row justify-between align-center">
      <view class="flex-row align-center">
        <view class="vip-logo-box flex-row flex-center">
          <image class="vip-logo" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/vip_logo.svg" />
        </view>
        <view class="margin-left-20">
          <view class="flex-row align-center">
            <text class="text-32 color-secondary text-bold">{{ vipInfo.name }}</text>
            <text v-if="vipInfo.type == 1" class="text-22 color-secondary margin-left-10">({{ vipInfo.typeLabel }})</text>
          </view>
          <text v-if="getDate(vipInfo.expirationDate)" class="text-24 color-secondary">{{ getDate(vipInfo.expirationDate) }}到期</text>
        </view>
      </view>

      <!-- v-if="isMainAccount" -->
      <tui-button width="192rpx" height="64rpx" type="black" @click="jump('/user/buy-vip/buy-vip')">
        <text class="text-28 color-primary margin-right-10">{{ getDate(vipInfo.expirationDate)?(salesInfo.freeMonth && !vipInfo.vipSalesId?freeMonth(salesInfo.freeMonth):'立即续费'):'升级会员' }}</text>
        <image class="vip-in" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/vip_in.svg" />
      </tui-button>
    </view>
  </view>
</template>

<script>
import { getVipRecord, getVipServiceInfo } from '@/common/api/user'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'MineVip',
  props: {
    isMainAccount: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      salesInfo: {}
    }
  },
  computed: {
    getDate() {
      return (str) => {
        if (str) {
          const arr = str.split(' ')
          return arr[0]
        }
        return ''
      }
    },
    freeMonth() {
      return (month) => {
        if (!month) {
          return '买1年赠0月'
        }
        if (month < 12) {
          return '买1年赠' + month + '月'
        } else if (month == 12) {
          return '买1年赠1年'
        } else {
          const y = month / 12
          const m = month % 12
          return '买1年赠' + Number(y.toString().substring(0, y.toString().indexOf('.'))) + '年' + (m ? m + '月' : '')
        }
      }
    },
    ...mapGetters({
      vipInfo: 'vipInfo'
    })
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getVipRecord()
      this.getVipServiceInfo()
    },
    // 获取会员信息
    async getVipRecord() {
      const [err, res] = await getVipRecord()
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data
      if (data[0]) {
        this.setVipInfo(data[0])
      } else {
        this.setVipInfo({
          expirationDate: '',
          name: '免费版',
          vipServiceInfoId: ''
        })
      }
    },
    // 获取版本信息
    async getVipServiceInfo() {
      const [err, res] = await getVipServiceInfo()
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        if (item.vipSalesId) {
          this.salesInfo = item
          return
        }
      }
    },
    ...mapMutations({
      setVipInfo: 'user/setVipInfo'
    })
  }
}
</script>

<style scoped lang="scss">
.mine-vip{
  position:relative;
  height:131rpx;
}
.mine-vip-background{
  @include position(absolute,$left:0,$bottom:0);
  height:131rpx;
  z-index:1;
}
.mine-vip-content{
  height:112rpx;
  padding:0 64rpx;
  position:relative;
  z-index:2;
}
.vip-logo-box{
  width: 64rpx;
  height: 64rpx;
  background: $color-secondary;
  border-radius:50%;
}
.vip-logo{
  width:56rpx;
  height:56rpx;
}
.vip-in{
  width:22rpx;
  height:22rpx;
}
</style>
